<template>
    <div class="bg_gray">
        <div class="deal_tit" :class="{'isFixed': isFixed}">
            <p :class="{'hot':indexTab== '0'}" @click="tabSwitch('0')">
                <span>全部电子券</span>
                {{total || '0'}}
            </p>
            <p :class="{'hot':indexTab== '1'}" @click="tabSwitch('1')">
                <span>购入的电子券</span>
                {{couponDeal.buyCouponCount||'0'}}
            </p>
            <p :class="{'hot':indexTab== '2'}" @click="tabSwitch('2')">
                <span>卖出的电子券</span>
                {{couponDeal.sellCouponCount||'0'}}
            </p>
        </div>
        <div class="coupon_deal_list"
          v-infinite-scroll="moreList"
          infinite-scroll-disabled="loading"
          infinite-scroll-immediate-check = "true"
          infinite-scroll-distance="100">
          <ul>
            <li v-for="(item,index) in _couponDealList">
              <div class="deal_list_tit">
                <span class="right">{{item.txnDate | endtimeStamp}}</span>
                <div class="deal_list_avatar"><img :src="item.usrPic"></div>
                {{item.usrName}}
              </div>
              <a @click="$router.push({name: 'dealDetail', params: {seqNo: item.seqNo}})">
                <div class="deal_list_info">
                  <div class="couponDiv">
                    <coupon-denomination :item="item"></coupon-denomination>
                  </div>
                  <div class="deal_i_con">
                    <p class="first_row"><span class="right">{{item.yunCur}}芸券</span><span class="name">{{item.couponName}}</span></p>
                    <p class="couponType" v-if="item.couponType==='voucher'"><span class="right">×{{item.sellNum}}(张)</span>¥{{item.denomination}}元抵用券<span>（满{{item.restricted}}使用）</span></p>
                    <p class="couponType" v-else-if="item.couponType==='rebate'">
                      <!--<span class="right">×{{item.sellNum}}(张)</span><span class="scpoe">全场{{item.denomination | denomination}}折 ({{scpoe(item.scpoe)}})</span>-->
                      <span class="right">×{{item.sellNum}}(张)</span><span class="scpoe">全场{{item.denomination | denomination}}折 </span>
                    </p>
                    <p class="couponType" v-else-if="item.couponType==='cash'">
                      <span class="right">×{{item.sellNum}}(张)</span>¥{{item.denomination}}元代金券
                      <!--<span>（满{{item.restricted}}使用）</span>-->
                    </p>
                    <p v-if="item.eventType==1"><span class="right">{{item.fee}}芸券</span>手续费</p>
                    <p v-if="item.promAppro=='buy'"><span class="right"><img style="width: 1rem;height: 1rem;" src="../../images/cashIcon.png"/></span></p>
                  </div>
                </div>
              </a>
              <div class="deal_list_btn">
                <a @click="delDeal(item.seqNo, index)" class="deal_btn_sub">删除订单</a>
                {{item.eventType==1?'收入：'+(item.yunCur*item.sellNum - item.fee):'支出：'+item.yunCur*item.sellNum}}芸券
              </div>
            </li>
          </ul>
          <no-data v-if="noInfo"></no-data>
        </div>
        <go-top v-show="goTopState" id="goTopId" ref="goTopId"></go-top>
        <div class="loading-box" v-show="!noInfo" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="!noInfo&&couponDealList.length>3">没有更多</div>
    </div>
</template>
<script>
    import listLoading from '../../componentes/global/listLoading.vue'
    import * as types from '../../vuex/types.js'
    import {mapState} from 'vuex'
    import {delCouDeal} from '../../service/getData3.js'
    import { Toast } from 'mint-ui'
    export default {
        name:"couponDeal",
        data:function(){
            return{
              loading:true,
              noMoreCoupon:true,
              indexTab:0,
              noInfo:false,
              goTopState:false,
              moreInfo:true,
              isFixed: false,
            }
        },
        components:{
            listLoading
        },
        beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },
        created:function(){
          // 监视滚动
          window.addEventListener('scroll', this.handleScroll);
          this.$store.commit(types.COUPONS_DEAL);//初始化列表
          this.$store.commit(types.COUPONS_PAGE,1);//初始化分页
          this.$store.commit(types.GET_SCORLL_STATUS,true);
          this.clickMoreList();
        },
        computed:{
            ...mapState({
                couponDealList:state => state.center.couponDealList,
                couponDeal:state => state.center.couponDeal,
                couponDealLimit:state => state.center.couponDealLimit

            }),
            total:function(){
                return parseInt(this.couponDeal.buyCouponCount) + parseInt(this.couponDeal.sellCouponCount)
            },
            _couponDealList:function() {
              this.couponDealList.forEach(item => {
                item.type = item.couponType
              })
              return this.couponDealList
            }
        },
        filters: {
          denomination: function(value) {
            let newVal = value.toString().split('').join('.')
            return newVal
          }
        },
        methods:{
            delDeal: function(seqNo, index) {
              delCouDeal({seqNo}).then(res => {
                if (res.respCode == '00') {
                    Toast({
                        message: '交易订单删除成功',
                        duration: 300
                    });
                    this._couponDealList.splice(index, 1)
                    // this.$store.commit(types.COUPONS_PAGE, this.couponDeal.current); //分页
                    this.clickMoreList()
                } else {
                  Toast({
                      message: '交易订单删除失败',
                      duration: 300
                  });
                }
              })
            },
            scpoe: function(value) {
              let type =  value.substring(0, 1)
              let newVal
              // I: 包括  T: 不包括
              if (type === 'I') {
                newVal = `包括${value.substring(1,value.length-1)}`
              } else {
                newVal = `不包括${value.substring(1,value.length-1)}`
              }
              return newVal
            },
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch('couponDealList',{method:'post',data:{"type":me.indexTab}}).then(function(rep){
                    if (me.indexTab==0) {
                        if(rep.content.buyCouponCount+rep.content.sellCouponCount<=0){
                        	
                            me.noInfo=true
                        }else{
                            me.noInfo=false
                        }
                    }else if(me.indexTab==1){
                        if(rep.content.buyCouponCount<=0){
                            me.noInfo=true
                        }else{
                            me.noInfo=false
                        }
                    }else if(me.indexTab==2){
                        if(rep.content.sellCouponCount<=0){
                            me.noInfo=true
                        }else{
                            me.noInfo=false
                        }
                    }
                    if(rep.content.list){
                        if(rep.content.list.length < me.couponDealLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.moreInfo=false;
                        }
                        if(rep.content.list.length == me.couponDealLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                    this.clickMoreList();

            },
            tabSwitch:function(num){
                this.$store.commit(types.COUPONS_DEAL);//初始化列表
                this.$store.commit(types.COUPONS_PAGE,1);//初始化分页
                this.indexTab = num;
                this.noMoreCoupon = true;
                this.moreInfo=true;
                this.clickMoreList();
            },
            //监听滚动事件
            handleScroll() {
              var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
              var scrollHeight = document.documentElement.clientHeight || document.body.scrollTop;
              if (scrollTop >= 80&&this._couponDealList.length>3) {
                this.isFixed = true
              } else if (scrollTop <= 48) {
                this.isFixed = false
              }
              if (scrollTop>=scrollHeight+50) {
                  this.goTopState = true
              } else {
                  this.goTopState = false
              }
              //回到顶部过程中用户滚动滚动条，停止定时器
              if (scrollTop <= 0) {
                if (this.$refs.goTopId) {
                  this.$refs.goTopId.clear();
                }
              }
            },
        }
    }

</script>
<style scoped>
.isFixed {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 3.6rem;
  transition: height 1.5s;
}
.deal_list_info {
  overflow: hidden;
  background-color: #fff!important;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.coupon_deal_img .couponDiv {
  margin-top: 0;
}
.deal_i_con, .deal_list_btn, .deal_list_tit{
  font-size: .85rem;
}
.deal_i_con > p > span.name {
  font-size: 1rem;
  color: #333;
}
.couponType {
  margin:0 0 0.2rem;
}
.scpoe {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  float: left;
  width: 10rem;
}
.couponType > span {
  display: inline-block;
}
.couponType::after {
  content: '';
  display: block;
  clear: both;
}
</style>
